<template>
  <div id="app">
    <div id="mydiv">
      <p>无敌爆爆龙: {{ message }}</p>
    <p>无敌爆爆龙666: {{ childMessage }}</p>
    <ChildComponent @child-event="handleChildEvent" :parent-message="message" />
    </div>
    
  </div>
</template>

<script>
import ChildComponent from './Child.vue';

export default {
  components: {
    ChildComponent
  },//注册一个名为 Child 的子组件
  data() {
    return {
      message: 'Hello',
      childMessage: ''
    };
  },
  computed: {
    reversedMessage() {//返回 message 数据属性的反转字符串
      return this.message.split('').reverse().join('');//.reverse(): 反转数组中的元素顺序,.join('')重新组合
    }
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`message changed from ${oldVal} to ${newVal}`);
    }
  },
  methods: {
    handleChildEvent(msg) {
      this.childMessage = msg;
    }
  }
};
</script>

<style>
    #mydiv {
      display: flex;
      align-items: flex-start;
  gap: 20px; /* 左右区域之间的间距 */
  padding: 10px;
  border: 1px solid red;
        background-color: yellow;
}
.left-box,
.right-box {
  background-color: yellow;
  padding: 10px;
  border: 1px solid red; /* 边框 */
}
        
    
</style>
